<template>
  <div class="questionnaire-first">
    <div class="page-header">
      <h1 class="page-title">结果查看{{ currentTeamName ? `（${currentTeamName}）` : '' }}</h1>
      <p class="page-description">量表调查数据展示与查询</p>
    </div>

    <!-- 导航栏 -->
    <div class="nav-tabs">
      <div
        class="nav-tab"
        :class="{ active: activeTab === 'overview' }"
        @click="switchTab('overview')"
      >
        总体展示
      </div>
      <div
        class="nav-tab"
        :class="{ active: activeTab === 'personal' }"
        @click="switchTab('personal')"
      >
        个人具体数据
      </div>
      <div
        class="nav-tab"
        :class="{ active: activeTab === 'problemList' }"
        @click="switchTab('problemList')"
      >
        问题人员名单
      </div>
    </div>

    <!-- 总体展示内容 -->
    <div v-if="activeTab === 'overview'" class="overview-content">
      <div class="overview-container">
        <!-- 人员统计模块 -->
        <div class="stats-section">
          <div class="stats-cards">
            <div class="stat-card total-card">
              <div class="stat-icon">
                <icon name="users" class="icon"></icon>
              </div>
              <div class="stat-content">
                <h3 class="stat-title">总人数</h3>
                <p class="stat-number">{{ totalPersons }}</p>
              </div>
            </div>

            <div class="stat-card male-card">
              <div class="stat-icon">
                <icon name="user" class="icon"></icon>
              </div>
              <div class="stat-content">
                <h3 class="stat-title">男生人数</h3>
                <p class="stat-number">{{ maleCount }}</p>
              </div>
            </div>

            <div class="stat-card female-card">
              <div class="stat-icon">
                <icon name="user" class="icon"></icon>
              </div>
              <div class="stat-content">
                <h3 class="stat-title">女生人数</h3>
                <p class="stat-number">{{ femaleCount }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 问题人员柱状图 -->
        <div class="chart-section">
          <div class="chart-container">
            <h3 class="chart-title">问题人员人数</h3>
            <div class="chart-wrapper">
              <div class="chart-content" ref="problemChart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人具体数据内容 -->
    <div v-if="activeTab === 'personal'" class="personal-content">
      <!-- 搜索区域 -->
      <div class="search-container">
        <div class="search-form">
          <div class="search-input-group">
            <label>姓名查找：</label>
            <input v-model="searchName" placeholder="输入姓名" @input="performSearch" />
          </div>
          <div class="search-input-group">
            <label>专业查找：</label>
            <select v-model="selectedMajor" @change="performSearch">
              <option value="">全部专业</option>
              <option v-for="major in majors" :key="major" :value="major">{{ major }}</option>
            </select>
          </div>
          <button @click="performSearch" class="search-button">查询</button>
          <button @click="clearSearch" class="clear-button">清空</button>
        </div>
      </div>

      <!-- 人员列表 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <div v-else-if="filteredPersons.length > 0" class="search-results">
        <h3>{{ searchPerformed ? `找到 ${filteredPersons.length} 个符合条件的人员` : `全部人员 (${filteredPersons.length}人)` }}</h3>
        <div class="person-cards">
          <div
            v-for="(person, index) in filteredPersons"
            :key="index"
            class="person-card"
          >
            <div class="person-card-header">
              <span class="person-name">{{ person.姓名 }}</span>
              <span class="person-gender" :class="getGenderClass(person.性别)">
                {{ person.性别 }}
              </span>
            </div>
            <div class="person-card-body">
              <p><span class="label">专业：</span>
                <span class="major-tag" :class="getMajorClass(person.专业)">
                  {{ person.专业 }}
                </span>
              </p>
              <p><span class="label">出生年月：</span>{{ person.出生年月日 }}</p>
              <p><span class="label">现居住地：</span>{{ person.现居住地 || '未填写' }}</p>
              <p><span class="label">兴趣爱好：</span>{{ person.兴趣爱好 || '未填写' }}</p>
            </div>
            <div class="person-card-footer">
              <button class="view-detail-btn" @click="viewPersonDetail(person)">查看详情</button>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="searchPerformed" class="no-results">
        未找到匹配的人员信息
      </div>

      <div v-else class="no-data">
        <div class="no-data-icon">
          <icon name="user" class="icon"></icon>
        </div>
        <h3 class="no-data-title">暂无人员数据</h3>
        <p class="no-data-description">请检查数据文件是否正确加载</p>
      </div>
    </div>

    <!-- 问题人员名单内容 -->
    <div v-if="activeTab === 'problemList'" class="problem-list-content">
      <!-- 问题类型导航栏 -->
      <div class="problem-nav-tabs">
        <div
          class="problem-nav-tab"
          :class="{ active: activeProblemTab === 'comprehensive' }"
          @click="switchProblemTab('comprehensive')"
        >
          综合风险人员
        </div>
        <div
          class="problem-nav-tab"
          :class="{ active: activeProblemTab === 'exercise' }"
          @click="switchProblemTab('exercise')"
        >
          运动问题名单
        </div>
        <div
          class="problem-nav-tab"
          :class="{ active: activeProblemTab === 'adaptation' }"
          @click="switchProblemTab('adaptation')"
        >
          适应问题名单
        </div>
        <div
          class="problem-nav-tab"
          :class="{ active: activeProblemTab === 'family' }"
          @click="switchProblemTab('family')"
        >
          家庭问题名单
        </div>
        <div
          class="problem-nav-tab"
          :class="{ active: activeProblemTab === 'social' }"
          @click="switchProblemTab('social')"
        >
          社交问题名单
        </div>
        <div
          class="problem-nav-tab"
          :class="{ active: activeProblemTab === 'gambling' }"
          @click="switchProblemTab('gambling')"
        >
          网赌网贷风险名单
        </div>
      </div>

      <!-- 综合风险人员 -->
      <div v-if="activeProblemTab === 'comprehensive'" class="comprehensive-risk-list">
        <div class="problem-list-header">
          <h3>综合风险人员名单</h3>
          <p class="problem-description">以下是经过综合评估的高风险人员，需要重点关注</p>
        </div>

        <div v-if="comprehensiveRiskPersons.length === 0" class="empty-state">
          <div class="empty-icon">
            <icon name="exclamation-triangle" class="icon"></icon>
          </div>
          <h3 class="empty-title">暂无综合风险人员</h3>
          <p class="empty-description">当前没有综合风险评估数据，请检查数据源是否正确</p>
        </div>

        <div v-else class="problem-table-container">
          <table class="problem-table">
            <thead>
              <tr>
                <th>姓名</th>
                <th>风险项数</th>
                <th>家庭情况</th>
                <th>运动</th>
                <th>社交情况</th>
                <th>适应能力</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in comprehensiveRiskPersons" :key="person.姓名">
                <td class="name-cell">{{ person.姓名 }}</td>
                <td style="text-align:center;font-weight:bold;color:#ff6b6b;">{{ person.风险项总数 }}</td>
                <td class="risk-cell">
                  <span
                    class="risk-tag"
                    :class="{
                      'risk-danger': person.家庭情况 === '风险偏大',
                      'risk-warning': person.家庭情况 === '可能有风险',
                      'risk-success': person.家庭情况 === '良好'
                    }"
                  >
                    {{ person.家庭情况 || '未填写' }}
                  </span>
                </td>
                <td class="risk-cell">
                  <span
                    class="risk-tag"
                    :class="{
                      'risk-danger': person.运动 === '存在风险',
                      'risk-warning': person.运动 === '一般',
                      'risk-success': person.运动 === '良好' || person.运动 === '优秀'
                    }"
                  >
                    {{ person.运动 || '未填写' }}
                  </span>
                </td>
                <td class="risk-cell">
                  <span
                    class="risk-tag"
                    :class="{
                      'risk-danger': person.社交情况 === '存在风险',
                      'risk-warning': person.社交情况 === '适中',
                      'risk-success': person.社交情况 === '优秀'
                    }"
                  >
                    {{ person.社交情况 || '未填写' }}
                  </span>
                </td>
                <td class="risk-cell">
                  <span
                    class="risk-tag"
                    :class="{
                      'risk-danger': person.适应能力 === '偏弱',
                      'risk-warning': person.适应能力 === '一般',
                      'risk-success': person.适应能力 === '良好' || person.适应能力 === '优秀'
                    }"
                  >
                    {{ person.适应能力 || '未填写' }}
                  </span>
                </td>
                <td class="action-cell">
                  <button class="detail-btn" @click="viewPersonDetail(person)">
                    查看详情
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 运动问题名单 -->
      <div v-if="activeProblemTab === 'exercise'" class="exercise-problem-list">
        <div class="problem-list-header">
          <h3>运动问题人员名单</h3>
          <p class="problem-description">以下人员在运动方面存在风险，需要重点关注</p>
        </div>

        <div v-if="exerciseProblems.length === 0" class="empty-state">
          <div class="empty-icon">
            <icon name="running" class="icon"></icon>
          </div>
          <h3 class="empty-title">暂无运动问题人员</h3>
          <p class="empty-description">当前没有运动风险等级为"存在风险"的人员</p>
        </div>

        <div v-else class="problem-table-container">
          <table class="problem-table">
            <thead>
              <tr>
                <th>姓名</th>
                <th>运动风险等级</th>
                <th>伤势或后遗症</th>
                <th>3公里情况</th>
                <th>引体向上情况</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in exerciseProblems" :key="person.姓名">
                <td class="name-cell">{{ person.姓名 }}</td>
                <td class="risk-cell">
                  <span class="risk-tag risk-danger">{{ person.运动 }}</span>
                </td>
                <td>{{ person.伤势或后遗症 || '无' }}</td>
                <td>{{ person['3公里'] || '未填写' }}</td>
                <td>{{ person.引体向上 || '未填写' }}</td>
                <td class="action-cell">
                  <button class="detail-btn" @click="viewPersonDetail(person)">
                    查看详情
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 适应问题名单 -->
      <div v-if="activeProblemTab === 'adaptation'" class="adaptation-problem-list">
        <div class="problem-list-header">
          <h3>适应问题人员名单</h3>
          <p class="problem-description">{{ adaptationDisplayMessage }}</p>
        </div>

        <div v-if="adaptationProblems.length === 0" class="empty-state">
          <div class="empty-icon">
            <icon name="user-cog" class="icon"></icon>
          </div>
          <h3 class="empty-title">暂无适应问题人员</h3>
          <p class="empty-description">当前没有适应能力为"偏弱"或"一般"的人员</p>
        </div>

        <div v-else class="problem-table-container">
          <table class="problem-table">
            <thead>
              <tr>
                <th>姓名</th>
                <th>适应能力</th>
                <th>适应住宿</th>
                <th>适应管理</th>
                <th>适应训练</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in adaptationProblems" :key="person.姓名">
                <td class="name-cell">{{ person.姓名 }}</td>
                <td class="adaptation-cell">
                  <span :class="getAdaptationClass(person.适应能力)">
                    {{ person.适应能力 }}
                  </span>
                </td>
                <td :class="getAdaptationDetailClass(person.适应住宿)">
                  {{ person.适应住宿 || '未填写' }}
                </td>
                <td :class="getAdaptationDetailClass(person.适应管理)">
                  {{ person.适应管理 || '未填写' }}
                </td>
                <td :class="getAdaptationDetailClass(person.适应训练)">
                  {{ person.适应训练 || '未填写' }}
                </td>
                <td class="action-cell">
                  <button class="detail-btn" @click="viewPersonDetail(person)">
                    查看详情
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div v-if="activeProblemTab === 'family'" class="family-problem-list">
        <div class="problem-list-header">
          <h3>家庭问题人员名单</h3>
          <p class="problem-description">以下人员在家庭方面存在风险，需要重点关注</p>
        </div>

        <div v-if="familyProblems.length === 0" class="empty-state">
          <div class="empty-icon">
            <icon name="home" class="icon"></icon>
          </div>
          <h3 class="empty-title">暂无家庭问题人员</h3>
          <p class="empty-description">当前没有家庭风险等级为"可能有风险"或"风险偏大"的人员</p>
        </div>

        <div v-else class="problem-table-container">
          <table class="problem-table">
            <thead>
              <tr>
                <th>姓名</th>
                <th class="family-risk-header">家庭风险等级</th>
                <th>家庭变故</th>
                <th>家庭疾病</th>
                <th>家人联系频率</th>
                <th>单亲家庭</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in familyProblems" :key="person.姓名">
                <td class="name-cell">{{ person.姓名 }}</td>
                <td class="risk-cell family-risk-cell">
                  <span class="risk-tag" :class="getFamilyRiskClass(person.家庭情况)">
                    {{ person.家庭情况 }}
                  </span>
                </td>
                <td :class="getContentClass(person.家庭变故)">
                  {{ person.家庭变故 || '无' }}
                </td>
                <td :class="getContentClass(person.家庭疾病)">
                  {{ person.家庭疾病 || '无' }}
                </td>
                <td :class="getFrequencyClass(person.家人联系频率)">
                  {{ person.家人联系频率 || '未填写' }}
                </td>
                <td :class="getSingleParentClass(person.单亲家庭)">
                  {{ getSingleParentText(person.单亲家庭) }}
                </td>
                <td class="action-cell">
                  <button class="detail-btn" @click="viewPersonDetail(person)">
                    查看详情
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 社交问题名单 -->
      <div v-if="activeProblemTab === 'social'" class="social-problem-list">
        <div class="problem-list-header">
          <h3>社交问题人员名单</h3>
          <p class="problem-description">{{ socialDisplayMessage }}</p>
        </div>

        <div v-if="socialProblems.length === 0" class="empty-state">
          <div class="empty-icon">
            <icon name="users" class="icon"></icon>
          </div>
          <h3 class="empty-title">暂无社交问题人员</h3>
          <p class="empty-description">当前没有社交情况为"存在风险"或"适中"的人员</p>
        </div>

        <div v-else class="problem-table-container">
          <table class="problem-table">
            <thead>
              <tr>
                <th>姓名</th>
                <th>社交情况</th>
                <th>性格</th>
                <th>交往情况</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in socialProblems" :key="person.姓名">
                <td class="name-cell">{{ person.姓名 }}</td>
                <td class="risk-cell">
                  <span
                    class="risk-tag"
                    :class="{
                      'risk-danger': person.社交情况 === '存在风险',
                      'risk-warning': person.社交情况 === '适中'
                    }"
                  >
                    {{ person.社交情况 }}
                  </span>
                </td>
                <td>{{ person.性格 || '未填写' }}</td>
                <td>{{ person.交往情况 || '未填写' }}</td>
                <td class="action-cell">
                  <button class="detail-btn" @click="viewPersonDetail(person)">
                    查看详情
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 网赌网贷风险名单 -->
      <div v-if="activeProblemTab === 'gambling'" class="gambling-problem-list">
        <div class="problem-list-header">
          <h3>网赌网贷风险人员名单</h3>
          <p class="problem-description">以下人员在网赌或网贷方面存在风险，需要重点关注</p>
        </div>

        <div v-if="gamblingProblems.length === 0" class="empty-state">
          <div class="empty-icon">
            <icon name="credit-card" class="icon"></icon>
          </div>
          <h3 class="empty-title">暂无网赌网贷风险人员</h3>
          <p class="empty-description">当前没有网贷风险或网赌风险为"有"的人员</p>
        </div>

        <div v-else class="problem-table-container">
          <table class="problem-table">
            <thead>
              <tr>
                <th>姓名</th>
                <th>网贷风险</th>
                <th>网贷原因</th>
                <th>是否有欠款</th>
                <th>网赌风险</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in gamblingProblems" :key="person.姓名">
                <td class="name-cell">{{ person.姓名 }}</td>
                <td>
                  <span :class="getGamblingRiskClass(person.网贷风险)">
                    {{ getGamblingRiskText(person.网贷风险) }}
                  </span>
                </td>
                <td :class="getContentClass(person.网贷原因)">
                  {{ person.网贷原因 || '无' }}
                </td>
                <td :class="getDebtClass(person.是否有欠款)">
                  {{ person.是否有欠款 || '未填写' }}
                </td>
                <td>
                  <span :class="getGamblingRiskClass(person.网赌风险)">
                    {{ getGamblingRiskText(person.网赌风险) }}
                  </span>
                </td>
                <td class="action-cell">
                  <button class="detail-btn" @click="viewPersonDetail(person)">
                    查看详情
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import questionPythonApi from '@/api/questionPython';

export default {
  name: 'QuestionnaireFirst',
  data() {
    return {
      activeTab: 'personal', // 默认显示个人具体数据
      activeProblemTab: 'comprehensive', // 问题人员名单的子导航
      loading: false,
      searchName: '',
      selectedMajor: '',
      searchPerformed: false,
      allPersons: [], // 所有量表人员数据
      comprehensiveRiskData: [], // 综合风险人员数据(top30_risk.csv)
      majors: [], // 专业列表
    }
  },
  computed: {
    // 获取当前队名
    currentTeamName() {
      const currentDataSource = localStorage.getItem('currentQuestionnaireDataSource');
      if (currentDataSource) {
        // 从数据源名称中提取队名，如 "dui2" -> "2队"
        const match = currentDataSource.match(/^dui(\d+)$/);
        if (match) {
          return `${match[1]}队`;
        }
      }
      return '';
    },

    filteredPersons() {
      // 如果没有进行搜索，显示所有人员
      if (!this.searchPerformed) {
        return this.allPersons;
      }

      return this.allPersons.filter(person => {
        // 姓名匹配
        const nameMatch = this.searchName.trim() === '' ||
                         person.姓名.toLowerCase().includes(this.searchName.trim().toLowerCase());

        // 专业匹配
        const majorMatch = this.selectedMajor === '' ||
                          person.专业 === this.selectedMajor;

        return nameMatch && majorMatch;
      });
    },

    // 综合风险人员列表（五大模块风险项最多的前30人）
    comprehensiveRiskPersons() {
      const personsWithRisk = this.allPersons.map(person => ({
        ...person,
        风险项总数: this.calculateRiskCount(person)
      }));
      return personsWithRisk
        .sort((a, b) => b.风险项总数 - a.风险项总数)
        .slice(0, 10)
        .filter(p => p.风险项总数 > 0);
    },

    // 运动问题人员列表
    exerciseProblems() {
      return this.allPersons.filter(person => {
        return person.运动 === '存在风险';
      });
    },

    // 家庭问题人员列表
    familyProblems() {
      return this.allPersons.filter(person => {
        return person.家庭情况 === '可能有风险' || person.家庭情况 === '风险偏大';
      });
    },

    // 网赌网贷风险人员列表
    gamblingProblems() {
      return this.allPersons.filter(person => {
        return person.网贷风险 === '有' || person.网赌风险 === '有';
      });
    },

    // 适应问题人员列表
    adaptationProblems() {
      // 首先尝试筛选"偏弱"的人员
      const weakAdaptation = this.allPersons.filter(person => {
        return person.适应能力 === '偏弱';
      });

      // 如果没有"偏弱"的人员，则筛选"一般"的人员
      if (weakAdaptation.length === 0) {
        return this.allPersons.filter(person => {
          return person.适应能力 === '一般';
        });
      }

      return weakAdaptation;
    },

    // 适应问题显示信息
    adaptationDisplayMessage() {
      const weakCount = this.allPersons.filter(person => person.适应能力 === '偏弱').length;
      const generalCount = this.allPersons.filter(person => person.适应能力 === '一般').length;

      if (weakCount === 0) {
        return `没有适应能力为"偏弱"的人员，当前展示适应能力为"一般"的人员（共${generalCount}人）`;
      } else {
        return `以下人员适应能力为"偏弱"，需要重点关注（共${weakCount}人）`;
      }
    },

    // 总人数统计
    totalPersons() {
      return this.allPersons.length;
    },

    // 男性人数统计
    maleCount() {
      return this.allPersons.filter(person => person.性别 === '男').length;
    },

    // 女性人数统计
    femaleCount() {
      return this.allPersons.filter(person => person.性别 === '女').length;
    },

    // 社交问题人员列表
    socialProblems() {
      // 优先显示"存在风险"的人员
      const riskPersons = this.allPersons.filter(person => person.社交情况 === '存在风险');

      // 如果有"存在风险"的人员，直接返回
      if (riskPersons.length > 0) {
        return riskPersons;
      }

      // 如果没有"存在风险"的人员，返回"适中"的人员
      return this.allPersons.filter(person => person.社交情况 === '适中');
    },

    // 社交问题显示消息
    socialDisplayMessage() {
      const riskPersons = this.allPersons.filter(person => person.社交情况 === '存在风险');

      if (riskPersons.length > 0) {
        return '以下人员在社交方面存在风险，需要重点关注';
      } else {
        return '当前没有社交风险人员，以下显示社交情况为"适中"的人员';
      }
    }
  },
  watch: {
    activeTab(newTab) {
      if (newTab === 'overview') {
        this.$nextTick(() => {
          setTimeout(() => {
            this.initProblemChart();
          }, 100);
        });
      }
    }
  },
  mounted() {
    this.loadQuestionnaireData();

    // 使用nextTick确保DOM完全渲染后再初始化图表
    this.$nextTick(() => {
      setTimeout(() => {
        this.initProblemChart();
      }, 100);
    });

    // 监听数据源变更事件
    this.$root.$on('questionnaireDataSourceChanged', (data) => {
      console.log('接收到数据源变更事件:', data);
      this.loadQuestionnaireData();
    });
  },
  beforeDestroy() {
    // 清理事件监听器
    this.$root.$off('questionnaireDataSourceChanged');
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },

    switchProblemTab(tab) {
      this.activeProblemTab = tab;
    },

    async loadQuestionnaireData() {
      this.loading = true;
      try {
        // 优先读取缓存的 model 和 rawData
        const model = localStorage.getItem('currentQuestionnaireModel');
        const rawData = localStorage.getItem('currentQuestionnaireRawData');
        if (model && rawData) {
          // 调用 viewResult 获取 csv
          const csvBlob = await questionPythonApi.viewResult(model, rawData);
          let csvText = '';
          if (csvBlob instanceof Blob) {
            csvText = await csvBlob.text();
          } else if (typeof csvBlob === 'string') {
            csvText = csvBlob;
          }
          this.parseCSVData(csvText);
          this.extractMajors();
          this.$nextTick(() => {
            this.initProblemChart();
          });
          this.loading = false;
          return;
        }
        // 优先读取localStorage中的分析结果csv
        const localCsv = localStorage.getItem('questionnaireResultCSV');
        if (localCsv) {
          this.parseCSVData(localCsv);
          this.extractMajors();
          this.$nextTick(() => {
            this.initProblemChart();
          });
          this.loading = false;
          return;
        }
        // 获取当前选择的数据源
        const currentDataSource = localStorage.getItem('currentQuestionnaireDataSource');
        let csvUrl = '/data/liangbiao/liangbiao1.csv'; // 默认数据源

        if (currentDataSource) {
          // 使用选择的数据源，文件名为 dui+数字.csv
          csvUrl = `/data/liangbiao/${currentDataSource}/${currentDataSource}.csv`;
        }

        // 读取CSV文件数据
        const response = await axios.get(csvUrl);
        const csvData = response.data;

        // 解析CSV数据
        this.parseCSVData(csvData);

        // 加载综合风险数据(top30_risk.csv)
        await this.loadComprehensiveRiskData(currentDataSource);

        // 提取专业列表
        this.extractMajors();

        // 初始化图表
        this.$nextTick(() => {
          this.initProblemChart();
        });

      } catch (error) {
        console.error('加载量表数据失败:', error);
        this.$message && this.$message.error('加载量表数据失败，请检查数据源是否存在');

        // 如果加载失败，尝试加载默认数据源
        if (localStorage.getItem('currentQuestionnaireDataSource')) {
          console.log('尝试加载默认数据源');
          localStorage.removeItem('currentQuestionnaireDataSource');
          this.loadQuestionnaireData();
          return;
        }
      } finally {
        this.loading = false;
      }
    },

    async loadComprehensiveRiskData(currentDataSource) {
      try {
        // 构建top30_risk.csv的路径
        let riskCsvUrl = '/data/liangbiao/top30_risk.csv'; // 默认路径

        if (currentDataSource) {
          // 使用选择的数据源文件夹下的top30_risk.csv
          riskCsvUrl = `/data/liangbiao/${currentDataSource}/top30_risk.csv`;
        }

        console.log('加载综合风险数据，数据源:', riskCsvUrl);

        // 读取top30_risk.csv文件
        const response = await axios.get(riskCsvUrl);
        const csvData = response.data;

        // 解析CSV数据
        this.parseComprehensiveRiskData(csvData);

      } catch (error) {
        console.error('加载综合风险数据失败:', error);
        // 如果加载失败，清空数据但不报错，因为这个文件可能不存在
        this.comprehensiveRiskData = [];
      }
    },

    parseComprehensiveRiskData(csvText) {
      const lines = csvText.split('\n').filter(line => line.trim());
      if (lines.length < 2) {
        this.comprehensiveRiskData = [];
        return;
      }

      // 获取表头
      const headers = lines[0].split(',').map(h => h.trim());

      // 解析数据行
      this.comprehensiveRiskData = [];
      for (let i = 1; i < lines.length; i++) {
        const values = lines[i].split(',').map(v => v.trim());
        if (values.length >= headers.length) {
          const person = {};
          headers.forEach((header, index) => {
            person[header] = values[index] || '';
          });
          this.comprehensiveRiskData.push(person);
        }
      }

      console.log('综合风险数据解析完成，共', this.comprehensiveRiskData.length, '条记录');
    },

    parseCSVData(csvText) {
      const lines = csvText.split('\n').filter(line => line.trim());
      if (lines.length < 2) return;

      // 获取表头
      const headers = lines[0].split(',').map(h => h.trim());

      // 解析数据行
      this.allPersons = [];
      for (let i = 1; i < lines.length; i++) {
        const values = this.parseCSVLine(lines[i]);
        if (values.length >= headers.length) {
          const person = {};
          headers.forEach((header, index) => {
            person[header] = values[index] ? values[index].trim() : '';
          });

          // 只添加有姓名的记录
          if (person.姓名) {
            this.allPersons.push(person);
          }
        }
      }
    },

    parseCSVLine(line) {
      const result = [];
      let current = '';
      let inQuotes = false;

      for (let i = 0; i < line.length; i++) {
        const char = line[i];

        if (char === '"') {
          inQuotes = !inQuotes;
        } else if (char === ',' && !inQuotes) {
          result.push(current);
          current = '';
        } else {
          current += char;
        }
      }

      result.push(current);
      return result;
    },

    extractMajors() {
      const majorSet = new Set();
      this.allPersons.forEach(person => {
        if (person.专业 && person.专业.trim()) {
          majorSet.add(person.专业.trim());
        }
      });
      this.majors = Array.from(majorSet).sort();
    },

    performSearch() {
      // 如果搜索条件为空，则重置为显示所有人员
      if (this.searchName.trim() === '' && this.selectedMajor === '') {
        this.searchPerformed = false;
      } else {
        this.searchPerformed = true;
      }
    },

    clearSearch() {
      this.searchName = '';
      this.selectedMajor = '';
      this.searchPerformed = false;
    },

    getGenderClass(gender) {
      return gender === '男' ? 'gender-male' : 'gender-female';
    },

    getMajorClass(major) {
      // 根据专业返回不同的样式类
      const majorMap = {
        '人工智能': 'major-ai',
        '通信工程': 'major-communication',
        '信息工程': 'major-info',
        '侦测工程': 'major-detect',
        '水声工程': 'major-aquatic',
        '网电指挥与工程': 'major-network',
        '侦查情报': 'major-intelligence'
      };

      // 模糊匹配专业名称
      for (const [key, value] of Object.entries(majorMap)) {
        if (major && major.includes(key)) {
          return value;
        }
      }

      return 'major-default';
    },

    // 获取家庭风险等级样式类
    getFamilyRiskClass(riskLevel) {
      if (riskLevel === '风险偏大') {
        return 'risk-high';
      } else if (riskLevel === '可能有风险') {
        return 'risk-medium';
      }
      return 'risk-low';
    },

    // 获取内容有无的样式类
    getContentClass(content) {
      if (!content || content === '无' || content.trim() === '') {
        return 'content-none';
      }
      return 'content-has';
    },

    // 获取联系频率样式类
    getFrequencyClass(frequency) {
      if (frequency === '较多') {
        return 'frequency-high';
      } else if (frequency === '适中') {
        return 'frequency-medium';
      } else if (frequency === '偏少') {
        return 'frequency-low';
      }
      return 'frequency-unknown';
    },

    // 获取单亲家庭样式类
    getSingleParentClass(singleParent) {
      if (singleParent === '是') {
        return 'single-parent-yes';
      } else if (singleParent === '否') {
        return 'single-parent-no';
      }
      return 'single-parent-unknown';
    },

    // 获取单亲家庭显示文本
    getSingleParentText(singleParent) {
      if (singleParent === '是') {
        return '是';
      } else if (singleParent === '否') {
        return '否';
      }
      return '未填写';
    },

    // 获取网赌网贷风险样式类
    getGamblingRiskClass(risk) {
      if (risk === '有') {
        return 'gambling-risk-high';
      }
      return 'gambling-risk-none';
    },

    // 获取网赌网贷风险显示文本
    getGamblingRiskText(risk) {
      if (risk === '有') {
        return '高';
      } else if (risk === '无') {
        return '无';
      }
      return '未填写';
    },

    // 获取欠款情况样式类
    getDebtClass(debt) {
      if (debt === '有') {
        return 'debt-yes';
      } else if (debt === '无') {
        return 'debt-no';
      }
      return 'debt-unknown';
    },

    // 获取适应能力样式类
    getAdaptationClass(adaptationLevel) {
      if (adaptationLevel === '偏弱') {
        return 'adaptation-weak';
      } else if (adaptationLevel === '一般') {
        return 'adaptation-general';
      } else if (adaptationLevel === '良好') {
        return 'adaptation-good';
      } else if (adaptationLevel === '优秀') {
        return 'adaptation-excellent';
      }
      return 'adaptation-unknown';
    },

    // 获取适应详情样式类
    getAdaptationDetailClass(detail) {
      if (detail === '优秀') {
        return 'adaptation-detail-excellent';
      } else if (detail === '良好') {
        return 'adaptation-detail-good';
      } else if (detail === '适中') {
        return 'adaptation-detail-medium';
      } else if (detail === '偏弱') {
        return 'adaptation-detail-weak';
      } else if (!detail || detail === '无' || detail.trim() === '') {
        return 'adaptation-detail-none';
      }
      return 'adaptation-detail-unknown';
    },

    viewPersonDetail(person) {
      // 跳转到量表个人详情页面
      this.$router.push({
        name: 'questionnaire-detail',
        params: {
          name: person.姓名,
          type: 'first'
        },
        query: {
          data: JSON.stringify(person)
        }
      });
    },

    // 初始化问题人员柱状图
    initProblemChart() {
      console.log('开始初始化问题人员柱状图');

      if (!this.$refs.problemChart) {
        console.error('图表容器未找到');
        return;
      }

      console.log('图表容器找到:', this.$refs.problemChart);

      try {
        // 引入echarts
        const echarts = require('echarts');
        console.log('ECharts加载成功:', echarts);

        // 初始化图表
        const chart = echarts.init(this.$refs.problemChart);
        console.log('图表初始化成功:', chart);

        // 准备数据
        const chartData = this.getProblemChartData();
        console.log('图表数据:', chartData);

        // 配置选项
        const option = {
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let result = params[0].name + '<br/>';
            params.forEach(item => {
              result += `<span style="color:${item.color}">●</span> ${item.seriesName}: ${item.value}人<br/>`;
            });
            return result;
          }
        },
        legend: {
          data: chartData.legendData,
          top: 10,
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['运动问题', '适应问题', '家庭问题', '社交问题', '网赌网贷问题'],
          axisLabel: {
            color: '#ffffff',
            fontSize: 12,
            interval: 0,
            rotate: 0
          },
          axisLine: {
            lineStyle: {
              color: '#4a5568'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#ffffff'
          },
          axisLine: {
            lineStyle: {
              color: '#4a5568'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#4a5568'
            }
          }
        },
          series: chartData.series
        };

        console.log('图表配置:', option);

        // 设置配置项
        chart.setOption(option);
        console.log('图表配置设置完成');

        // 响应式
        window.addEventListener('resize', () => {
          chart.resize();
        });

      } catch (error) {
        console.error('初始化图表时出错:', error);
      }
    },

    // 获取问题人员图表数据
    getProblemChartData() {
      // 运动问题数据
      const exerciseData = this.exerciseProblems.length;

      // 适应问题数据
      const adaptationData = this.adaptationProblems.length;

      // 家庭问题数据（分为两个等级）
      const familyRiskHigh = this.allPersons.filter(person => person.家庭情况 === '风险偏大').length;
      const familyRiskMedium = this.allPersons.filter(person => person.家庭情况 === '可能有风险').length;

      // 社交问题数据
      const socialData = this.socialProblems.length;

      // 网赌网贷问题数据
      const gamblingData = this.gamblingProblems.length;

      // 构建系列数据
      const series = [];
      const legendData = [];

      // 存在隐患（原"可能有风险"）- 黄色
      if (familyRiskMedium > 0) {
        series.push({
          name: '存在隐患',
          type: 'bar',
          stack: 'family',
          data: [0, 0, familyRiskMedium, 0, 0, 0],
          itemStyle: {
            color: '#ffa726'
          }
        });
        legendData.push('存在隐患');
      }

      // 问题人员（合并"风险偏大"和其他问题类型）- 红色
      series.push({
        name: '问题人员',
        type: 'bar',
        data: [exerciseData, adaptationData, familyRiskHigh, socialData, gamblingData],
        itemStyle: {
          color: '#ff6b6b'
        }
      });
      legendData.push('问题人员');

      return {
        series,
        legendData
      };
    },

    // 统计五大模块风险项数量
    calculateRiskCount(person) {
      let count = 0;
      if (person.运动 === '存在风险') count++;
      if (person.适应能力 === '偏弱' || person.适应能力 === '一般') count++;
      if (person.家庭情况 === '风险偏大' || person.家庭情况 === '可能有风险') count++;
      if (person.社交情况 === '存在风险' || person.社交情况 === '适中') count++;
      if (person.网贷风险 === '有' || person.网赌风险 === '有') count++;
      return count;
    }
  }
}
</script>

<style lang="scss" scoped>
.questionnaire-first {
  width: 100%;
  height: 100vh;
  background-image: url("~@/assets/pageBg.png");
  background-size: cover;
  background-position: center center;
  padding: 20px;
  overflow-y: auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;

  .page-title {
    color: #68d8fe;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(104, 216, 254, 0.3);
  }

  .page-description {
    color: #d3d6dd;
    font-size: 18px;
    opacity: 0.8;
  }
}

// 导航栏样式
.nav-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  background: rgba(19, 25, 47, 0.6);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid rgba(104, 216, 254, 0.2);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;

  .nav-tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    color: #d3d6dd;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;

    &:hover {
      background: rgba(104, 216, 254, 0.1);
      color: #68d8fe;
    }

    &.active {
      background: #68d8fe;
      color: #13192f;
      font-weight: bold;
      box-shadow: 0 2px 8px rgba(104, 216, 254, 0.3);
    }
  }
}

// 总体展示内容
.overview-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}

// 内容
.personal-content {
  max-width: 1200px;
  margin: 0 auto;
}

// 搜索容器
.search-container {
  margin-bottom: 30px;

  .search-form {
    background: rgba(19, 25, 47, 0.8);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(104, 216, 254, 0.3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;

    .search-input-group {
      display: flex;
      align-items: center;

      label {
        color: #68d8fe;
        margin-right: 10px;
        font-weight: bold;
        font-size: 16px;
        white-space: nowrap;
      }

      input, select {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(104, 216, 254, 0.5);
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        min-width: 150px;

        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }

        option {
          background: #13192f;
          color: #fff;
        }
      }
    }

    .search-button {
      background: #68d8fe;
      color: #13192f;
      border: none;
      padding: 8px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s ease;
      margin-right: 10px;

      &:hover {
        background: #4bc8fe;
        transform: translateY(-1px);
      }
    }

    .clear-button {
      background: rgba(104, 216, 254, 0.2);
      color: #68d8fe;
      border: 1px solid rgba(104, 216, 254, 0.5);
      padding: 8px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(104, 216, 254, 0.3);
        transform: translateY(-1px);
      }
    }
  }
}

// 加载状态
.loading-state {
  text-align: center;
  padding: 60px 20px;

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(104, 216, 254, 0.3);
    border-top: 3px solid #68d8fe;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
  }

  p {
    color: #d3d6dd;
    font-size: 16px;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 搜索结果
.search-results {
  background: rgba(19, 25, 47, 0.8);
  border: 1px solid rgba(104, 216, 254, 0.3);
  padding: 20px;
  border-radius: 8px;

  h3 {
    color: #68d8fe;
    margin-bottom: 20px;
    font-size: 20px;
  }

  .person-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;

    &::-webkit-scrollbar {
      width: 8px;
      background: rgba(19,25,47,0.3);
      border-radius: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(19,25,47,0.3);
      border-radius: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
      border-radius: 8px;
    }
  }
}

// 人员卡片
.person-card {
  background: rgba(19, 25, 47, 0.9);
  border: 1px solid rgba(104, 216, 254, 0.3);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    border-color: rgba(104, 216, 254, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(104, 216, 254, 0.2);
  }

  .person-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .person-name {
      color: #68d8fe;
      font-size: 18px;
      font-weight: bold;
    }

    .person-gender {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;

      &.gender-male {
        background: rgba(52, 152, 219, 0.2);
        color: #3498db;
        border: 1px solid rgba(52, 152, 219, 0.3);
      }

      &.gender-female {
        background: rgba(231, 76, 60, 0.2);
        color: #e74c3c;
        border: 1px solid rgba(231, 76, 60, 0.3);
      }
    }
  }

  .person-card-body {
    margin-bottom: 16px;

    p {
      margin: 8px 0;
      color: #d3d6dd;
      font-size: 14px;
      line-height: 1.4;

      .label {
        color: #68d8fe;
        font-weight: 500;
        margin-right: 4px;
      }

      .major-tag {
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: bold;

        &.major-ai {
          background: rgba(155, 89, 182, 0.2);
          color: #9b59b6;
          border: 1px solid rgba(155, 89, 182, 0.3);
        }

        &.major-communication {
          background: rgba(46, 204, 113, 0.2);
          color: #2ecc71;
          border: 1px solid rgba(46, 204, 113, 0.3);
        }

        &.major-info {
          background: rgba(52, 152, 219, 0.2);
          color: #3498db;
          border: 1px solid rgba(52, 152, 219, 0.3);
        }

        &.major-detect {
          background: rgba(230, 126, 34, 0.2);
          color: #e67e22;
          border: 1px solid rgba(230, 126, 34, 0.3);
        }

        &.major-aquatic {
          background: rgba(26, 188, 156, 0.2);
          color: #1abc9c;
          border: 1px solid rgba(26, 188, 156, 0.3);
        }

        &.major-network {
          background: rgba(241, 196, 15, 0.2);
          color: #f1c40f;
          border: 1px solid rgba(241, 196, 15, 0.3);
        }

        &.major-intelligence {
          background: rgba(231, 76, 60, 0.2);
          color: #e74c3c;
          border: 1px solid rgba(231, 76, 60, 0.3);
        }

        &.major-default {
          background: rgba(149, 165, 166, 0.2);
          color: #95a5a6;
          border: 1px solid rgba(149, 165, 166, 0.3);
        }
      }
    }
  }

  .person-card-footer {
    text-align: center;

    .view-detail-btn {
      background: linear-gradient(135deg, #68d8fe 0%, #4bc8fe 100%);
      color: #13192f;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(104, 216, 254, 0.3);
      }
    }
  }
}

// 无结果状态
.no-results {
  text-align: center;
  padding: 60px 20px;
  background: rgba(19, 25, 47, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(104, 216, 254, 0.2);

  color: #d3d6dd;
  font-size: 18px;
}

// 初始状态和无数据状态
.initial-state, .no-data {
  text-align: center;
  padding: 60px 40px;
  background: rgba(19, 25, 47, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(104, 216, 254, 0.2);

  .initial-icon, .no-data-icon {
    margin-bottom: 20px;

    .icon {
      font-size: 64px;
      color: #68d8fe;
      opacity: 0.6;
    }
  }

  .initial-title, .no-data-title {
    color: #68d8fe;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px;
  }

  .initial-description, .no-data-description {
    color: #d3d6dd;
    font-size: 16px;
    opacity: 0.7;
    line-height: 1.5;
  }
}

// 空状态（总体展示）
.empty-state {
  text-align: center;
  padding: 60px 40px;
  background: rgba(19, 25, 47, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(104, 216, 254, 0.2);

  .empty-icon {
    margin-bottom: 20px;

    .icon {
      font-size: 64px;
      color: #68d8fe;
      opacity: 0.6;
    }
  }

  .empty-title {
    color: #68d8fe;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px;
  }

  .empty-description {
    color: #d3d6dd;
    font-size: 16px;
    opacity: 0.7;
    line-height: 1.5;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .questionnaire-first {
    padding: 15px;
  }

  .page-header {
    .page-title {
      font-size: 28px;
    }

    .page-description {
      font-size: 16px;
    }
  }

  .nav-tabs {
    max-width: 100%;

    .nav-tab {
      padding: 10px 16px;
      font-size: 14px;
    }
  }

  .search-form {
    flex-direction: column;
    align-items: stretch !important;
    gap: 15px !important;

    .search-input-group {
      flex-direction: column;
      align-items: stretch !important;

      label {
        margin-bottom: 5px;
        margin-right: 0;
      }

      input, select {
        min-width: auto;
      }
    }
  }

  .person-cards {
    grid-template-columns: 1fr !important;
  }

  .empty-state, .initial-state, .no-data {
    padding: 40px 20px;

    .empty-icon .icon, .initial-icon .icon, .no-data-icon .icon {
      font-size: 48px;
    }

    .empty-title, .initial-title, .no-data-title {
      font-size: 20px;
    }

    .empty-description, .initial-description, .no-data-description {
      font-size: 14px;
    }
  }
}

/* 问题人员名单样式 */
.problem-list-content {
  padding: 20px;
}

.problem-nav-tabs {
  display: flex;
  background: rgba(15, 19, 37, 0.8);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.problem-nav-tab {
  flex: 1;
  padding: 12px 20px;
  text-align: center;
  cursor: pointer;
  color: #d3d6dd;
  font-size: 14px;
  transition: all 0.3s;
  border-radius: 8px;
  margin: 4px;
  white-space: nowrap;
}

.problem-nav-tab:hover {
  background: rgba(104, 216, 254, 0.1);
  color: #68d8fe;
}

.problem-nav-tab.active {
  background: rgba(104, 216, 254, 0.2);
  color: #68d8fe;
  border: 1px solid #68d8fe;
}

.problem-list-header {
  margin-bottom: 20px;
}

.problem-list-header h3 {
  color: #68d8fe;
  font-size: 20px;
  margin-bottom: 8px;
}

.problem-description {
  color: #d3d6dd;
  font-size: 14px;
  margin: 0;
}

.problem-table-container {
  background: rgba(15, 19, 37, 0.8);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(104, 216, 254, 0.2);
}

.problem-table {
  width: 100%;
  border-collapse: collapse;
}

.problem-table th {
  background: rgba(104, 216, 254, 0.1);
  color: #68d8fe;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid rgba(104, 216, 254, 0.2);
}

.problem-table td {
  padding: 12px;
  color: #d3d6dd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.problem-table tbody tr:hover {
  background: rgba(104, 216, 254, 0.05);
}

.name-cell {
  font-weight: 600;
  color: #68d8fe;
}

.risk-cell {
  text-align: center;
}

.risk-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.risk-danger {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

.risk-warning {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid #ffc107;
}

.risk-success {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
  border: 1px solid #28a745;
}

.risk-high {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}

.risk-medium {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid #ffc107;
}

.risk-low {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
  border: 1px solid #28a745;
}

/* 内容有无样式 */
.content-none {
  color: #6c757d;
  font-style: italic;
}

.content-has {
  color: #ff6b6b;
  font-weight: 500;
}

/* 联系频率样式 */
.frequency-high {
  color: #28a745;
  font-weight: 500;
}

.frequency-medium {
  color: #ffc107;
  font-weight: 500;
}

.frequency-low {
  color: #ff6b6b;
  font-weight: 500;
}

.frequency-unknown {
  color: #6c757d;
  font-style: italic;
}

/* 单亲家庭样式 */
.single-parent-yes {
  color: #ff6b6b;
  font-weight: 600;
}

.single-parent-no {
  color: #28a745;
  font-weight: 500;
}

.single-parent-unknown {
  color: #6c757d;
  font-style: italic;
}

/* 家庭风险等级列宽度 */
.family-risk-header {
  width: 150px;
  min-width: 150px;
}

.family-risk-cell {
  width: 150px;
  min-width: 150px;
}

/* 网赌网贷风险样式 */
.gambling-risk-high {
  color: #ff0000 !important;
  font-weight: 700;
  font-size: 14px;
}

.gambling-risk-none {
  color: #28a745;
  font-weight: 500;
}

/* 欠款情况样式 */
.debt-yes {
  color: #ff6b6b;
  font-weight: 600;
}

.debt-no {
  color: #28a745;
  font-weight: 500;
}

.debt-unknown {
  color: #6c757d;
  font-style: italic;
}

/* 适应能力样式 */
.adaptation-weak {
  color: #ff6b6b;
  font-weight: 700;
  background: rgba(255, 107, 107, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.adaptation-general {
  color: #ffc107;
  font-weight: 600;
  background: rgba(255, 193, 7, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.adaptation-good {
  color: #17a2b8;
  font-weight: 500;
}

.adaptation-excellent {
  color: #28a745;
  font-weight: 500;
}

.adaptation-unknown {
  color: #6c757d;
  font-style: italic;
}

/* 适应详情样式 */
.adaptation-detail-excellent {
  color: #28a745;
  font-weight: 500;
}

.adaptation-detail-good {
  color: #17a2b8;
  font-weight: 500;
}

.adaptation-detail-medium {
  color: #ffc107;
  font-weight: 500;
}

.adaptation-detail-weak {
  color: #ff6b6b;
  font-weight: 600;
}

.adaptation-detail-none {
  color: #6c757d;
  font-style: italic;
}

.adaptation-detail-unknown {
  color: #6c757d;
  font-style: italic;
}

.adaptation-cell {
  text-align: center;
}

.action-cell {
  text-align: center;
}

.detail-btn {
  background: linear-gradient(135deg, #68d8fe 0%, #4facfe 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.detail-btn:hover {
  background: linear-gradient(135deg, #4facfe 0%, #68d8fe 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(104, 216, 254, 0.3);
}

/* 总体展示界面样式 */
.overview-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.stats-section {
  width: 100%;
}

.stats-cards {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.stat-card {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.3) 0%, rgba(74, 85, 104, 0.3) 100%);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.total-card {
  border-left: 4px solid #4facfe;
}

.male-card {
  border-left: 4px solid #68d8fe;
}

.female-card {
  border-left: 4px solid #ff6b9d;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.stat-icon .icon {
  font-size: 24px;
  color: #ffffff;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #a0aec0;
  margin: 0 0 5px 0;
  font-weight: 500;
}

.stat-number {
  font-size: 28px;
  color: #ffffff;
  margin: 0;
  font-weight: 700;
}

.chart-section {
  width: 100%;
}

.chart-container {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.3) 0%, rgba(74, 85, 104, 0.3) 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  text-align: center;
}

.chart-wrapper {
  width: 100%;
  height: 400px;
}

.chart-content {
  width: 100%;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .overview-container {
    flex-direction: column;
  }

  .stats-cards {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .problem-nav-tabs {
    flex-direction: column;
  }

  .problem-nav-tab {
    flex: none;
    margin: 2px;
  }

  .problem-table-container {
    overflow-x: auto;
  }

  .problem-table {
    min-width: 600px;
  }

  .overview-container {
    padding: 15px;
    gap: 20px;
  }

  .stats-cards {
    flex-direction: column;
    align-items: center;
  }

  .stat-card {
    width: 100%;
    max-width: 300px;
  }

  .chart-wrapper {
    height: 300px;
  }
}
</style>
